<script setup lang="ts">
  import { ref } from 'vue'
  import WorkflowList from './components/WorkflowList'
  import WorkflowEditor from './components/WorkflowEditor'
  import type { Workflow } from './types/workflow'
  import { useWorkflowStore } from './stores/workflow'

  const currentWorkflow = ref<Workflow | null>(null)

  const store = useWorkflowStore()
  const handleEdit = (workflow: Workflow) => {
    currentWorkflow.value = workflow
  }

  const handleSave = (workflow: Workflow) => {
    store.updateWorkflow(workflow)
  }
</script>

<template>
  <div class="flex h-screen bg-[#1A1A1A]">
    <!-- 左侧工作流列表 -->
    <WorkflowList
      class="w-[260px] border-r border-[#3D2A55]"
      :current-workflow="currentWorkflow"
      @edit="handleEdit"
    />

    <!-- 右侧工作流编辑器 -->
    <div class="flex-1">
      <template v-if="currentWorkflow">
        <WorkflowEditor :workflow="currentWorkflow" :on-save="handleSave" />
      </template>
      <div v-else class="h-full flex items-center justify-center text-gray-500">
        <div class="text-center">
          <i class="i-mdi-flow-parallel text-6xl mb-4" />
          <p>选择一个工作流开始编辑</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  /* 这里可以添加你的样式 */
</style>
